<template>
  <view class="home-page">
    <!-- 导航 -->
    <view class="header">
		  <view class="location">
			<image src="../../static/地址.png" mode=""></image>
			<text class="location-text">杭州市梦想小镇</text>
			<image src="../../static/3.1铃铛.png" mode=""></image>
		  </view>
		<view class="search-bar">
		  <input type="text" placeholder="永辉超市优惠商品" @click="search"/>
		</view>
    </view>
    <!-- 图片 -->
    <view style=" border-bottom-style:none;width:100%;height:120px;">
      <img src="../../static/imgs/assets/02.jpg" style="width:100%;height:120px; border-bottom-style:none;">
    </view>

    <view class="item-container">
      <view class="item">
        <image src="../../static/imgs/assets/super.png"/>
        <text>超市便利</text>
      </view>
      <view class="item">
        <image src="../../static/imgs/assets/market.png"/>
        <text>菜市场</text>
      </view>
      <view class="item">
        <image src="../../static/imgs/assets/fruits.png"/>
        <text>水果店</text>
      </view>
      <view class="item">
        <image src="../../static/imgs/assets/flower.png"/>
        <text>鲜花绿植</text>
      </view>
      <view class="item">
        <image src="../../static/imgs/assets/drug.png"/>
        <text>医药健康</text>
      </view>
      <view class="item">
        <image src="../../static/imgs/assets/home.png"/>
        <text>家居时尚</text>
      </view>
      <view class="item">
        <image src="../../static/imgs/assets/cake.png"/>
        <text>蜡烛蛋糕</text>
      </view>
      <view class="item">
        <image src="../../static/imgs/assets/sign.png"/>
        <text>签到</text>
      </view>
      <view class="item">
        <image src="../../static/imgs/assets/prestige.png"/>
        <text>大牌免运</text>
      </view>
      <view class="item">
        <image src="../../static/imgs/assets/red.png"/>
        <text>红包套餐</text>
      </view>
    </view>
    <!-- nearshop -->
    <view class="nearshop">
      <view>
        <text class="near">附近店铺</text>
        <text>查看更多</text>
      </view>
      <view v-for="(item, index) in shop" :key="index" class="near-content" @click="change(item._id)">
        <image :src="Config.API_HOST+item.imgUrl" mode="aspectFit" ></image>
        <view>
          <text>{{ item.name }}</text>
          <view class="name-content">
            <text>月售：{{ item.sales }}</text>
            <text>起送：{{ item.expressLimit }}</text>
            <text>基础运费：{{ item.expressPrice }}</text>
          </view>
          <view class="share">
            <text>{{ item.slogan }}</text>
          </view>
        </view>
      </view>
    </view>
  </view>
</template>

<script setup>
import { ref } from "vue"
import { onShow } from "@dcloudio/uni-app"
import  Config  from  '@/config.js'
const search=()=>{
	uni.navigateTo({
		url:"/pages/search/index"
	})
}
const shop = ref([])
onShow(() => {
  uni.request({
    url: Config.API_HOST+"/hotList",
    success: (res) => {
      shop.value = res.data
    },
    fail: (err) => {
      console.error('请求失败:', err)
    }
  })
})
const change=(id)=>{
	uni.navigateTo({
		url: `../near/index?id=${id}`
	});
}
</script>

<style scoped>
.header image{
	width: 24px;
	height: 24px;
}
.name-content > text {
  margin-right: 10px;
}
.header {
  background-color: #0099ff;
  padding: 10px 20px;
  box-sizing: border-box;
  height: 100px;
}
.location-text{
	color: white;
	margin-right: 150px;
	
}
.location {
	margin-top: 6px;
	font-size: 15px;
}

.location-icon {
  margin-right: 5px;
}

.search-bar input {
  width: 60%;
  padding: 8px 15px;
  border: none;
  border-radius: 20px;
  background-color: rgba(255, 255, 255, 0.8);
  font-size: 14px;
  margin: 10px;
  width: 300px;
}

.notification-icon {
  font-size: 20px;
}
.share {
  color: rgb(255, 102, 102);
}
.near-content {
  border-top: 1px solid gainsboro;
  width: 350px;
  margin: 0 auto;
  margin-top: 15px;
  padding-top: 5px;
  display: flex;
}
.near-content > image {
  width: 60px;
  height: 60px;
  margin-right: 10px;
}
.near {
  margin-left: 20px;
  margin-right: 210px;
}
.home-page {
  font-family: Arial, sans-serif;
}
.item-container {
  width: 100%;
  height: 170px;
  background-image: linear-gradient(#0099ff, white);
  border-top-style: none;
  display: flex;
  flex-wrap: wrap;
  justify-content: space-around;
}
.item {
  width: 20%;
  height: 80px;
  border-radius: 10px; /* 圆角 */
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  border-style: none;
}
.item image {
  margin-bottom: 10px;
  width: 30px;
  height: 30px;
}
.item text {
  font-size: 15px; /* 文字大小 */
  color: #333; /* 深灰色文字 */
}
</style>